<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Adminox - Responsive Web App Kit</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description">
	<meta content="Coderthemes" name="author">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- App favicon -->
	<link rel="shortcut icon" href="${ctx}/admin/${ctx}/admin/images/favicon.ico">
	<!-- DataTables -->
	<link href="${ctx}/admin/css/icons.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css">
	<!-- Responsive datatable examples -->
	<link href="${ctx}/admin/plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css">
	<!-- App css -->
	<link href="${ctx}/admin/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/css/metismenu.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/css/style.css" rel="stylesheet" type="text/css">
	<script src="${ctx}/admin/js/modernizr.min.js"></script>
</head>
<body>
<!-- Begin page -->
<div id="wrapper">
    <#include "../common/header.ftl">
	<!-- Top Bar End -->
	<!-- ========== Left Sidebar Start ========== -->
    <#include "../common/menu.ftl">
	<!-- Left Sidebar End -->
	<!-- ============================================================== -->
	<!-- Start right Content here -->
	<!-- ============================================================== -->
	<div class="content-page">
		<!-- Start content -->
		<div class="content">
			<div class="container-fluid">
				<div class="row">
					<div class="col-12">
						<div class="page-title-box">
							<h4 class="page-title float-left">用户列表</h4>
							<ol class="breadcrumb float-right">
								<li class="breadcrumb-item"><a href="#">Adminox</a></li>
								<li class="breadcrumb-item"><a href="#">Tables</a></li>
								<li class="breadcrumb-item active">Datatable</li>
							</ol>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
				<!-- end row -->
				<div class="row">
					<div class="col-lg-12">
						<div class="card-box">
							<h4 class="text-uppercase font-18">用户列表</h4>
							<div class="border m-b-30"></div>
							<div class="table-responsive">
								<table class="table table-hover m-0 table-actions-bar">

									<thead>
									<tr>
										<th>openid</th>
										<th>头像</th>
										<th>昵称</th>
										<th>性别</th>
										<th>地址</th>
										<th>备注</th>
										<th>操作</th>
									</tr>
									</thead>
									<tbody>
                                    <#list mpUsers as mpUser >
                                    <tr>
	                                    <td width="20%">
		                                    <h5>${mpUser.openId}</h5>
	                                    </td>
	                                    <td>
		                                    <img src="${mpUser.headImgUrl}" alt="contact-img" title="contact-img"
		                                         class=" thumb-sm"/>
	                                    </td>

	                                    <td>
		                                    <h5 class="text-primary">${mpUser.nickname}</h5>
	                                    </td>
	                                    <td>
		                                    <h5 class="text-primary">${mpUser.sexDesc}</h5>
	                                    </td>
	                                    <td>
		                                    <i class="mdi mdi-map-marker text-primary"></i>${(mpUser.country)!'未知'}
		                                    /${(mpUser.province)!'未知'}/${(mpUser.city)!'未知'}
	                                    </td>

	                                    <td>
		                                    <i class="mdi mdi-bookmark text-success"></i>${(mpUser.remark)!'无'}
	                                    </td>

	                                    <td>
		                                    <a href="#" onclick="edit_remark('${mpUser.openId}');"
		                                       class="table-action-btn" title="备注"><i class="mdi mdi-pencil"></i></a>
		                                    <a href="#" class="table-action-btn"><i class="mdi mdi-close"></i></a>
	                                    </td>
                                    </tr>
                                    </#list>
									</tbody>
								</table>
							</div>
						</div>

					</div>

				</div>
				<!-- end row -->
			</div>
			<!-- container -->
		</div>
		<!-- content -->
    <#include "../common/footer.ftl">
	</div>

	<!--修改用户备注-->
	<div id="modal-edit-remark" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
	     aria-hidden="true" style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h4 class="modal-title">修改用户备注</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12">
							<div class="form-group">
								<label for="modal-openId" class="control-label">openId</label>
								<input type="text" disabled class="form-control" id="modal-openId" placeholder="openId">
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12">
							<div class="form-group">
								<label for="modal-remark" class="control-label">备注</label>
								<input type="text" class="form-control" id="modal-remark" placeholder="请输入备注">
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">关闭</button>
					<button type="button" id="model-save" class="btn btn-info waves-effect waves-light">保存修改</button>
				</div>
			</div>
		</div>
	</div>
	<!-- ============================================================== -->
	<!-- End Right content here -->
	<!-- ============================================================== -->
</div>
<!-- END wrapper -->
<!-- jQuery  -->
<script src="${ctx}/admin/js/jquery.min.js"></script>
<script src="${ctx}/admin/js/tether.min.js"></script>
<!-- Tether for Bootstrap -->
<script src="${ctx}/admin/js/bootstrap.min.js"></script>
<script src="${ctx}/admin/js/metisMenu.min.js"></script>
<script src="${ctx}/admin/js/waves.js"></script>
<script src="${ctx}/admin/js/jquery.slimscroll.js"></script>
<!-- Required datatable js -->
<script src="${ctx}/admin/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="${ctx}/admin/plugins/datatables/dataTables.bootstrap4.min.js"></script>
<!-- Buttons examples -->
<script src="${ctx}/admin/plugins/datatables/dataTables.buttons.min.js"></script>
<script src="${ctx}/admin/plugins/datatables/buttons.bootstrap4.min.js"></script>
<script src="${ctx}/admin/plugins/datatables/jszip.min.js"></script>
<script src="${ctx}/admin/plugins/datatables/pdfmake.min.js"></script>
<script src="${ctx}/admin/plugins/datatables/vfs_fonts.js"></script>
<script src="${ctx}/admin/plugins/datatables/buttons.html5.min.js"></script>
<script src="${ctx}/admin/plugins/datatables/buttons.print.min.js"></script>
<script src="${ctx}/admin/plugins/datatables/buttons.colVis.min.js"></script>
<!-- Responsive examples -->
<script src="${ctx}/admin/plugins/datatables/dataTables.responsive.min.js"></script>
<script src="${ctx}/admin/plugins/datatables/responsive.bootstrap4.min.js"></script>
<!-- App js -->
<script src="${ctx}/admin/js/jquery.core.js"></script>
<script src="${ctx}/admin/js/jquery.app.js"></script>
<script type="text/javascript">
	function edit_remark(id) {
		$("#modal-openId").val(id);
		$("#modal-edit-remark").modal('show');
	}

	$(function () {
        $("#model-save").on('click',function(){
            var remark = $("#modal-remark").val();
			var openId = $("#modal-openId").val();
			$.ajax({
                url:'${ctx}/user/update_remark',
                data:{'openId':openId,'remark':remark},
                type:'POST',
                success:function (res) {
                    alert(res);
                }
            })
        })
	})
</script>
</body>
</html>